@import "@/theme.less";
.media{
  position: fixed;
  z-index: 1000;
  left:0;
  top:0;
  width: 375px;
  height: 100%;
  background: rgba(0,0,0,.4);
  color: @font-color1;
  font-size: @font-min;
  #media{
    position: absolute;
    bottom: 0;
    left:0;
    width: 375px;
    height: 95%;
    border-radius: 15px 15px 0 0;
    background: @main-bg;
    transition: .1s;
    &.show{
      transform: translateY(0);
    }
    &.close{
      transform: translateY(100%);
    }
    h2{
      position: relative;
      height: 40px;
      line-height: 40px;
      letter-spacing: 1px;
      color: @font-color1;
      background: @page-bg;
      border-radius: 15px 15px 0 0;
      font-size: @font-max;
      font-weight: bold;
      padding-left:10px;
      box-sizing: border-box;
      .memory{
        display: block;
        margin: 0 auto;
        width: 260px;
        text-align: center;
        font-size: @font-min;
        color: @main-color1;
      }
      .close,.select{
        position: absolute;
        top:0;
        right: 10px;
        width: 40px;
        text-align: center;
        font-size: 18px;
        color: @font-color1;
      }
      .select{
        left:10px;
        font-size: 22px;
      }
    }
    #update-button{
      width: 355px;
      margin: 10px auto 0 auto;
    }
    #list{
      padding:0 0 100px 0;
      width: 355px;
      height: 100%;
      margin: 0 auto;
      box-sizing: border-box;
      dl{
        position: relative;
        width: 117px;
        height: 140px;
        margin-right: 2px;
        background: @page-bg;
        margin-top: 5px;
        float: left;
        padding:3px;
        box-sizing: border-box;
        &:nth-of-type(3n){
          margin-right: 0;
        }
        dt{
          width: 100%;
          height: 100%;
          img{
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
        dd{
          &.play-icon{
            position: absolute;
            bottom: 0;
            left:5px;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            i{
              color: @main-color1;
              font-size: @font-huge;
            }
          }
          &.status{
            position: absolute;
            top:0;
            left:0;
            width: 100%;
            height: 20px;
            line-height: 20px;
            background: rgba(250,204,60,0.6);
            font-size: @font-min;
            text-align: center;
            color: #fff;
          }
        }
      }
    }
  }
}
